<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html lang="zh-cn" style="height: 100%">
<base href="<%=basePath%>">
<head>
	<meta charset="UTF-8">
	<meta name="format-detection" content="telephone=no" />
	<meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<title>卡列表</title>
	<link rel="stylesheet" href="css/base.css">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/base.js"></script>
	<script type="text/javascript" src="js/common.js"></script>
	<script type="text/javascript" src="js/handle.js"></script>
	<script type="text/javascript">
		var fromPage = "${fromPage}"; // 记录上一个页面
		var cardNoHasChosen = "${cardNo}"; // 记录已选中的卡号

		var r = eval( '(' + '${result}' + ')' ); // 储存卡列表接口原始数据
		// var r = eval( '(' + '{"object":[{"acctBalance":"0","cardNo":"1422220000000453","cardType":"1","certificateid":"360502198312087132","certificatetype":"0","vehicleColor":"0","vehiclePlate":"赣KL7807"}]}' + ')' ); // 储存卡列表接口原始数据
		
		var list = []; // 卡片信息数组
		for (var i = 0; i < r.object.length; i++) {
			var obj = r.object[i];
			var vpl = obj.vehiclePlate; //车牌号
			var cardtype = obj.cardType == 1 ? "储值卡" : "记账卡";	// 卡类型
			var limit = "" // 到期时间
			var cardNo = obj.cardNo;
			var acctBalance = obj.acctBalance;// 余额
			list.push([vpl,cardtype,cardNo,limit,acctBalance]);
		};

		// 点击选中卡后返回原来页面
		function goBack(ele) {
			var cardNo = $(ele).attr("data-cardNo");
			var acctBalance = $(ele).attr("data-balance");
			var vehiclePlate = $(ele).attr("data-vehiclePlate");
			if (fromPage == "recharge") {//来自充值页
				window.location.href = "payment/toRecharge?cardNo="+cardNo+ "&acctBalance="+acctBalance+"&vehiclePlate="+vehiclePlate;
			}else if(fromPage == "transfer") {
				window.location.href = "transfer/toTransfer?cardNo="+cardNo+ "&acctBalance="+acctBalance+"&vehiclePlate="+vehiclePlate;
			}

		}

		// 根据卡列表的长度加载页面
		function loadCard(list) {
			console.log(list);
			if(!list) {
				return;
			}

			var clr;
			if (list.length == 0) {
				$(".nocard").removeClass('none');
				$(".wrap").addClass('none');
			}else {
				for (var i = 0; i < list.length; i++) {
					if (i%2==0) { // 卡序列号是偶数
						clr = "blue";
					}else {
						clr = "red";
					}
					var limitdate = list[i][3] ? "<img src='img/clock.png'><span>" + list[i][3] +"到期</span>" : "";
					var cardnum = "3601 "+cardNumFormat(list[i][2]); // 每4位用空格分隔
					var innerText = "<div class='card_wrap card_wrap_"+ clr +"' data-cardNo='"
							+ list[i][2]
							+"' data-balance='"
							+ list[i][4]
							+"' data-vehiclePlate='"
							+list[i][0]
							+"' onclick='goBack(this)'>"
							+"<h3> <i class = 'icon_card '></i>"
							+ list[i][0]
							+"<span>"
							+"赣通卡 <i>"
							+ list[i][1]
							+"</i>"
							+"</span></h3>"
							+"<h4>"
							+ cardnum
							+"</h4>"
							+ "<h5>"+limitdate
							+"</h5></div>";
					$(".card_list").append(innerText);
				};
				$(".card_wrap[data-cardno="+ cardNoHasChosen +"]").addClass('cardNoHasChosen'); // 突出显示已选中的卡片
				$(".nocard").addClass('none');
				$(".wrap").removeClass('none');
			}
		}

		$(function () {
			loadCard(list); // 绘制卡列表的dom
		})
	</script>
</head>
<body class="ed" style = "position:relative">
<div class="wrap ">
	<div class="card_list"></div>
</div>
<div class="mask_layer none" >
	<div class="unbind_box">
		<p class="unbindBtn" id="unbindCard">解绑赣通卡</p>
		<p class="cancelBtn">取消</p>

	</div>
</div>
<div class="nocard">
	<img src="img/nobindcard.png">
	<h3>你没有绑定任何赣通卡哦</h3>
	<p onclick="javascript:window.location.href = 'card/toCardAddPage?fromPage=${fromPage}'">立即绑定</p>
</div>
<div class="toast toast_timeout" style="display:none">网络异常，请稍后重试！</div>
<div class="toast toast_error" style="display:none">信息输入有误</div>
<div class="loading" style="display:none">
	<img src="img/loading.gif"></div>
</body>
</html>